/* 
1 打开页面的时候 看到学员信息数据
  1 定义一个函数  发送请求获取数据 渲染页面 

2 新增学员
  1 点击  “新增” 按钮 弹出模态框 - 显示新增 表单   已经实现 
  2 新增表单中  籍贯 下拉列表  
    1 重新去熟悉  select 标签
    2 考虑结合业务 实现 
    3 发送请求 获取 城市相关数据 来渲染 下拉列表 

3 需要给 省 下拉列表 绑定 change 事件 
    1 事件触发  获取选中的 “省” 拼接成参数 发送给后端 来获取对应 市 
       后端响应对应  市 数据了，显示在 新增表单中  市 下拉列表中 

4 需要给 市 下拉列表 绑定 change事件 
    1 事件触发了 获取选中的 市 拼接成参数 发送给后端 来获取对应的 县 
       后端响应对应 县 数据了， 显示在 新增表单中  县  下拉列表 
       
3 给新增表单  绑定 提交事件
    1 阻止默认行为
    2 快速获取新增表单中的值
    3 拼接成参数发送给后端 完成新增
    4 成功 
      1 提示用户 新增成功
      2 重置新增表单
      3 关闭模态框
      4 发送请求获取最新的数据

3 编辑学员
  1 给 编辑 按钮绑定点击事件  
    1 弹出编辑-模态框 
  2 让待编辑的数据  显示在 模态框中 
    2 获取被编辑数据的id 发送给后端 后端响应数据 
    3 获取到数据 显示在 编辑表单中 
      3 获取到数据 广东省广州市越秀区 显示在 编辑表单中 
    3 省份城市区
      1 省份不管管 打开页面的时候 初始化的获取过里面的数据 
      2 市 发送一个请求-广东省发过去，返回 市信息 显示在 select标签
  2 先设置一下 下拉列表 也能正常使用  先实现！！
  
  3 给编辑表单绑定 提交事件 
    1 阻止默认行为
    2 快速获取编辑表单中的值
    3 拼接成参数发送给后端 完成编辑
    4 成功 
      1 提示用户 编辑成功
      2 重置编辑表单
      3 关闭模态框
      4 发送请求获取最新的数据

  4 删除学员
    1 给删除按钮绑定点击事件
    2 事件触发 
    3 确认框询问用户
    4 获取要删除数据的id
    5 拼接参数 发送给后端完成删除
    6 提示用户 
    7 获取最新数据
 */

const tbody = document.querySelector('tbody');
// 新增表单
const addForm = document.querySelector('#addModal form');
const updateForm = document.querySelector('#updateModal form');
// 发送请求 获取数据渲染页面
function getStudentList() {
  axios.get('/student/list').then((result) => {
    if (result.data.code === 0) {
      const list = result.data.data;
      console.log(list);
      // console.table(list); 打印表格

      const html = list.reduce(
        (h, v) =>
          h +
          `
                <tr>
        <th scope="row">${v.id}</th>
        <td>${v.name}</td>
        <td>${v.age}</td>
        <td>${v.sex}</td>
        <td>${v.group}</td>
        <td>${v.phone}</td>
        <td>${v.salary}</td>
        <td>${v.truesalary}</td>
        <td>${v.province + v.city + v.county}</td>
        <td>
          <button type="button" data-id="${v.id}" class="btn btn-primary btn-sm update-show-modal">修改</button>
          <button type="button" data-id="${v.id}" class="btn btn-danger btn-sm delete-btn">删除</button>
        </td>
      </tr>
          `,
        ''
      );
      tbody.innerHTML = html;
    }
  })
}

// 发送请求 获取数据渲染页面
getStudentList();

// -------------发送请求获取数据 显示到对应的 下拉列表
// url 接口地址
// params 接口的参数
// dom 目标下拉表
// label 下拉列表默认显示的文本

// 默认让select标签选中的 值
function renderSelect(url, params, dom, label, value = '') {
  axios.get(url, { params }).then((result) => {
    console.log('数据回来');
    dom.innerHTML = result.data.reduce(
      (h, v) => h + `<option value="${v}">${v}</option>`,
      `<option value="">--${label}--</option>`
    );

    // 设置select标签 选中某个值
    dom.value = value;
  })
}

function initSelect(selector) {

  // 发送请求获取城市数据 来渲染下拉列表   会导致 错题提示 出现  处理
  // 原因可能是  普通数据 返回的格式   和  城市列表返回数据格式 不一样
  // 让后端去调整  返回的数据结构 必须一致！！！！

  // 新增表单中 省 下拉列表
  const provinceSelect = document.querySelector(`${selector} [name=province]`);
  // 新增表单中 市 下拉列表
  const citySelect = document.querySelector(`${selector} [name=city]`);
  const countySelect = document.querySelector(`${selector} [name=county]`);

  // axios.get('/geo/province').then((result) => {

  //   provinceSelect.innerHTML = result.data.reduce(
  //     (h, v) => h + `<option value="${v}">${v}</option>`,
  //     `<option value="">--省--</option>`
  //   )
  // });

  // 获取省份数据 显示出来
  renderSelect('/geo/province', {}, provinceSelect, '省');

  // // 新增中 省 change 事件
  // provinceSelect.addEventListener('change', function () {
  //   console.log(provinceSelect.value);
  //   // 根据省来安排
  //   axios.get('/geo/city', { params: { pname: provinceSelect.value } })
  //     .then((result) => {
  //       citySelect.innerHTML = result.data.reduce(
  //         (h, v) => h + `<option value="${v}">${v}</option>`,
  //         `<option value="">--市--</option>`
  //       )
  //     })
  // })

  // 新增中 省 change事件
  provinceSelect.addEventListener('change', function () {
    // 根据省来获取市
    renderSelect(
      '/geo/city',
      { pname: provinceSelect.value },
      citySelect,
      '市'
    )
  })

  // 新增中 市 change事件
  // citySelect.addEventListener('change', function () {
  //   // console.log(citySelect.value);
  //   // 根据接口要求 凭接参数
  //   const params = {
  //     // 省
  //     pname: provinceSelect.value,
  //     cname: citySelect.value,
  //   };

  //   axios.get('/geo/county', { params })
  //     .then((result) => {
  //       countySelect.innerHTML = result.data.reduce(
  //         (h, v) => h + `<option value="${v}">${v}</option>`,
  //         `<option value="">--县--</option>`
  //       )
  //     })
  // })

  citySelect.addEventListener('change', function () {
    // 根据省来获取市
    renderSelect(
      '/geo/county',
      { pname: provinceSelect.value, cname: citySelect.value },
      countySelect,
      '县'
    )
  })

}



// 初始化新增表单的 下拉列表
initSelect('#addModal');

// 初始化 编辑表单的 下拉列表
initSelect('#updateModal');

// 绑定 新增表单 提交事件
addForm.addEventListener('submit', function (e) {
  e.preventDefault();

  // 获取表单数据
  const data = $(addForm).serialize();
  // 发送请求 完成新增
  axios.post('/student/add', data).then((result) => {
    if (result.data.code === 0) {
      // 成功
      toastr.success(result.data.message);
      // 重置新增表单
      addForm.reset();
      // 关闭模态框
      $('#addModal').modal('hide');
      // 获取最新的数据
      getStudentList();
    }
  })
})

// 给tbody标签绑定点击事件
// 编辑 点击
// 删除 点击
tbody.addEventListener('click', function (e) {
  const dom = e.target;
  if (dom.classList.contains('update-show-modal')) {
    // 弹出 编辑 模态框
    $('#updateModal').modal('show');

    // 获取被编辑得数据id
    const id = dom.dataset.id;
    // 根据id 来发送请求 获取对应数据  获取待编辑的数据 显示到 对应的元素上 （普通的input标签、单选框、下拉列表标签 ）
    axios.get('/student/one', { params: { id } }).then((result) => {
      const obj = result.data.data;

      // 大功能 把对象数据 显示在form 标签中 start
      for (const key in obj) {
        // 根据key 去查找对应得dom元素
        const target = document.querySelector(`#updateModal [name=${key}]`);

        // 性别 单选框 特殊！！
        if (key === 'sex') {
          // 根据 当前 性别的值 (obj.sex) 找到 对应的 性别 单选框 让它选中
          // 既要找到 name=sex 而且 value = obj.sex 标签

          document.querySelector(
            `#updateModal [name=sex][value=${obj.sex}]`
          ).checked = true;
          continue;  //跳过下面的代码
        }

        // 当找到了这个dom元素 我们才可以设置 给普通的表单元素使用
        if (target) {
          target.value = obj[key];
        }
      }

      // 根据省信息 来获取市 显示处理 异步！
      renderSelect(
        '/geo/city',
        { pname: obj.province },
        document.querySelector('#updateModal [name=city]'),
        '市',
        obj.city
      );

      // 根据省和市 来获取 县 默认选中
      renderSelect(
        '/geo/county',
        { pname: obj.province, cname: obj.city },
        document.querySelector('#updateModal [name=county]'),
        '县',
        obj.county
      );

      // 大功能 把对象数据 显示在form标签中 end
    })
  } else if (dom.classList.contains('delete-btn')) {
    if (confirm('您确定删除吗？')) {
      const id = dom.dataset.id;
      axios.delete('/student/delete', { params: { id } })
        .then((result) => {
          if (result.data.code === 0) {
            toastr.success(result.data.message);
            getStudentList();
          }
        })
    }
  }
})

// 绑定 编辑表单 提交事件
updateForm.addEventListener('submit', function (e) {
  e.preventDefault();
  // 获取表单数据
  const data = $(updateForm).serialize();
  // 发送请求 完成新增
  axios.put('/student/update', data).then((result) => {
    if (result.data.code === 0) {
      // 成功
      toastr.success(result.data.message);
      // 重置 表单
      updateForm.reset();
      // 关闭模态框
      $('#updateModal').modal('hide');
      // 获取最新的数据
      getStudentList();
    }
  })
})